<template>
  <div>
    <!-- <a-button type="primary" @click="showModal">
      Open Modal with async logic
    </a-button> -->
    <a-modal
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>{{ ModalText }}</p>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //   visible: false,
      confirmLoading: false,
    };
  },
  model: {
    prop: "visible",
    event: "input",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    ModalText: {
      type: String,
      default: "Content of the modal",
    },
  },
  created() {
    console.log(this.visible);
  },
  methods: {
    showModal() {
      //   this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      //   this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      this.$emit("handleOk", true);

      setTimeout(() => {
        // this.visible = false;

        this.$emit("input", false);
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      console.log(e);
      //   this.visible = false;
      this.$emit("input", false);
    },
  },
};
</script>
